<template>
	<view class="page-cont">
		<navbar title="历史数据"></navbar>
		<scroll-view class="main-cont" :style="{height: pageHeight}">
			<view class="chart-cont">
				<view class="chart-header">
					<view>时间筛选：</view>
					<uni-datetime-picker v-model="currentTime" type="datetimerange" :clear-icon="false"
						@change="handleDateChange" />
				</view>
				<view class="chart-box">
					<!-- <image class="chart-fullscreen" src="/static/fullscreen.png" @click="handleFullscreen"></image> -->
					<view :style="{marginTop:'20rpx'}">
						<data-chart :chartData="chartData" ref="chartRef"></data-chart>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, onMounted, getCurrentInstance, computed } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import DataChart from "./components/data-chart.vue"
	import { useNavbar } from "@/utils/hooks.js";
	import * as dataApi from '@/api/data.js'
	const { proxy } = getCurrentInstance();

	const { pageHeight } = useNavbar();

	const chartData = ref([])
	const currentTime = ref([proxy.dayjs().subtract(12, 'hour').format('YYYY-MM-DD HH:mm:ss'), proxy.dayjs().format('YYYY-MM-DD HH:mm:ss')])

	const mid = ref("")
	const devid = ref("")
	const key = ref("")
	const chartRef = ref()

	onLoad((query) => {
		// getProjectData();
		// initData();
		mid.value = query?.mid;
		devid.value = query?.devid;
		key.value = decodeURIComponent(query?.key);
	});

	// 时间筛选
	const handleDateChange = (e) => {
		console.log('handleDateChange ', e)
		currentTime.value = e;
		getDataInfo()
	}

	// 全屏
	const handleFullscreen = (e) => {
		// uni.navigateTo({
		// 	url: '/pages/home/fan-detail-landscape'
		// });
	}

	onMounted(() => {
		getDataInfo();
	})

	const getDataInfo = async () => {

		const results = await dataApi.getHistoryData({
			"mid": mid.value, "devid": devid.value, "uri": "0"
			, "startTime": currentTime.value[0], "endTime": currentTime.value[1], "key": key.value
		})
		if (results[key.value]) {
			chartData.value = results[key.value];
			// chartRef.value.initChart();
		}
	}
</script>

<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			overflow: hidden;
			overflow-y: auto;
		}


		.chart-cont {
			padding: 35rpx 30rpx;
		}

		.chart-header {
			margin-bottom: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.chart-box {
			border: 1rpx solid #FAFAFC;
			border-radius: 5rpx;
			background-color: #fff;
		}


		.chart-fullscreen {
			position: relative;
			left: calc(100% - 40rpx);
			padding: 10rpx;
			width: 4rpx;
			height: 40rpx;
			box-sizing: border-box;
		}
	}
</style>